<template>
    <div class="user">
        用户管理

        <el-container>
            <el-header>
                <span>后台管理系统 <i class="el-icon-unfold"></i></span>
                <span>欢迎<span>111</span>登录</span>
                <el-row :gutter="20">
                    <el-col :span="6" :offset="12">
                        <div class="grid-content bg-purple"></div>
                        <router-link to="/login">
                            <el-button @click="jump('/login')">退出登录</el-button>
                        </router-link>
                    </el-col>
                </el-row>
            </el-header>

            <el-container>
                <!-- 侧边栏 -->
                <el-aside width="200px">
                    <el-row class="tac">
                        <el-col :span="24">
                            <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64"
                                text-color="#fff" active-text-color="#ffd04b">
                                <router-link to="/home/user">
                                    <el-menu-item index="1" @click="jump('/home/user')">
                                        <i class="el-icon-s-custom"></i>
                                        <span slot="title">用户管理</span>
                                    </el-menu-item>
                                </router-link>
                                <router-link to="/home/resource">
                                    <el-menu-item index="2" @click="jump('/home/resource')">
                                        <i class="el-icon-takeaway-box"></i>
                                        <span slot="title">资源管理</span>
                                    </el-menu-item>
                                </router-link>
                                <router-link to="/home/rights">
                                    <el-menu-item index="3" @click="jump('/home/rights')">
                                        <i class="el-icon-unlock"></i>
                                        <span slot="title">权限管理</span>
                                    </el-menu-item>
                                </router-link>
                                <router-link to="/home/finance">
                                    <el-menu-item index="4" @click="jump('/home/finance')">
                                        <i class="el-icon-s-finance"></i>
                                        <span slot="title">财务管理</span>
                                    </el-menu-item>
                                </router-link>
                            </el-menu>
                        </el-col>
                    </el-row>
                </el-aside>
                <el-main>

                    <!-- 数据表格 -->
                    <template>
                        <el-card>
                            <el-button @click="showDialog = true">添加用户</el-button>
                            <!-- 搜索 -->
                            <el-input v-model="getInfo" placeholder="请输入姓名或身份证号" prefix-icon="el-icon-search" ></el-input><el-button type="success" @click="search"><i class="el-icon-search"></i></el-button>
                                                                            <!-- prefix-icon="el-icon-search" 该属性可以在input框内添加icon -->
                        </el-card>
                        <!-- 添加用户Dialog对话框 -->
                        <el-dialog title="提示" :visible.sync="showDialog" width="30%">
                            <el-form ref="form" :model="form" label-width="60px">
                                <el-form-item label="姓名">
                                    <el-input v-model="form.name" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="年龄">
                                    <el-input v-model="form.age" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="性别">
                                    <el-radio-group v-model="form.sex">
                                        <el-radio label="男"></el-radio>
                                        <el-radio label="女"></el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="手机">
                                    <el-input v-model="form.tel" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="身份证">
                                    <el-input v-model="form.id" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-form>


                            <span slot="footer" class="dialog-footer">
                                <el-button @click="showDialog = false">取 消</el-button>
                                <el-button @click="addUser" type="primary">确定</el-button>
                            </span>
                        </el-dialog>

                        <el-table :data="splitData()" style="width: 100%">
                            <el-table-column prop="id" label="id" width="100">
                            </el-table-column>
                            <el-table-column prop="name" label="姓名" width="160">
                            </el-table-column>
                            <el-table-column prop="age" label="年龄" width="160">
                            </el-table-column>
                            <el-table-column prop="sex" label="性别" width="160">
                            </el-table-column>
                            <el-table-column prop="tel" label="电话" width="160">
                            </el-table-column>
                            <el-table-column prop="identify" label="身份证" width="270">
                            </el-table-column>
                            <el-table-column prop="todo" label="操作" width="130">
                                <template slot-scope="scope">
                                    <div>
                                        <el-button icon="el-icon-delete-solid" type="danger" size="mini"
                                            @click="del(scope.$index)">
                                            <!-- scope 是一个特殊的对象，它代表当前行的数据和其他相关信息。
                                                在这个代码中，scope.$index 表示当前行的索引，即该行数据在表格数据数组中的位置。 -->
                                        </el-button>
                                        <el-button icon="el-icon-edit" type="primary" size="mini" @click="todo">
                                        </el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>

                    <!-- 分页 -->
                    <el-pagination background :current-page="currentPage" :total="tableData.length" :page-size="pageSize"
                        :page-sizes="[5, 10, 15, 20]" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                        <!-- @size-change为改变每个页面展示的数据量的方法。@current-change为改变当前页的方法。 -->
                    </el-pagination>

                </el-main>
            </el-container>
        </el-container>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [{
                id: '1',
                name: '王小虎1',
                age: '12',
                sex: '女',
                tel: '133133',
                identify: '33410708199208098879'
            },
            {
                id: '1',
                name: '王小虎2',
                age: '12',
                sex: '女',
                tel: '133133',
                identify: '210708199208098879'
            },
            {
                id: '1',
                name: '王小虎3',
                age: '12',
                sex: '女',
                tel: '133133',
                identify: '555708199208098879'
            },
            {
                id: '1',
                name: '王小虎4',
                age: '12',
                sex: '女',
                tel: '133133',
                identify: '210708199208098879'
            },
            {
                id: '1',
                name: '王小虎5',
                age: '12',
                sex: '女',
                tel: '133133',
                identify: '210708199208098879'
            },
            {
                id: '1',
                name: '王小虎6',
                age: '12',
                sex: '女',
                tel: '133133',
                identify: '210708199208098879'
            },
            {
                id: '1',
                name: '王小虎7',
                age: '12',
                sex: '女',
                tel: '133133',
                identify: '210708199208098879'
            },
            
            ],
            showDialog: false,
            form: {
                name: '',
                sex: '',
                tel: '',
                age: '',
                id: 1,
                identify: '',
            },
            formLabelWidth: '120px',
            currentPage: 1,
            pageSize: 5,
            getInfo: '',
        }
    },
    methods: {
        jump(path) { // 页面跳转
            this.$router.push(path)
        },
        del(index) {
            // 删除当前行数据 issue
            this.tableData.splice(index, 1);
        },
        todo() { // 编辑
            alert()
        },
        handleSizeChange(val) {
            this.pageSize = val
        },
        handleCurrentChange(val) {
            this.currentPage = val
            // 在data中声明变量currentPage，pageSize，分别为默认页，以及默认尺寸。
        },
        splitData() { // 分页
            const start = (this.currentPage - 1) * this.pageSize;
            const end = start + this.pageSize;
            return this.tableData.slice(start, end);
        },
        addUser(){
            this.tableData.push(this.form); // 将新的用户数据添加到 tableData 数组中
            this.showDialog = false;
        },
        search(){
            console.log(this.getInfo)
        }

        // 添加筛选条件没做
        // 搜索过滤和渲染没做
        // 身份证号没修复
        // id不会自动排序
    }
}
</script>

<style scoped>
.el-header,
.el-footer {
    background-color: #0d305f;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    background-color: #304a68;
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
}

body>.el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}

.el-header {
    font-weight: bold;
    color: white;
    ;
    font-size: 30px;
    ;
    display: flex;
}

.el-button {
    width: 80px;
    line-height: 30px;
    ;
    padding: 0px;
    ;
    margin-top: 15px;
    ;
}

.el-header span:nth-of-type(2) {
    margin-left: 400px;
    ;
    font-size: 20px;
    ;
    font-weight: normal;
}

.cell .el-button {
    width: 40px;
    line-height: 30px;
    padding: 0px;
    margin-top: 15px;
}

.el-table__header {
    height: 100px;
}

.el-pagination {
    margin-top: 20px;
    ;
}

.el-main {
    line-height: 0px;
    ;
}

.el-button {
    float: left;
}

.el-card {
    overflow: none;
}

.el-card__body .el-button--default {
    margin-top: 0px;
    ;
    float: none;
}

.el-dialog__footer .el-button--default,
.el-button--primary {
    float: none;
}

.el-form-item__content {
    margin-left: 0px !important;
    /* 未生效 */
}

.el-card:nth-of-type(1) .el-button {
    float: left;
}

.el-card:nth-of-type(1) .el-icon-search {
    float: none;
}
.el-card:nth-of-type(1) .el-button:nth-of-type(2) {
    float: right;
    width: 40px;;
    height: 40px;;
    margin-top: 0px;;
}
.el-card:nth-of-type(1) .el-input {
    float: right;
    width: 200px;
}

</style>